<template>
  <div class="article_add">
    <el-header class="top">
      <i class="el-icon-s-home"></i>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>查看文章</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>
 
    <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>文章详情</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
       
        <!-- 卡片组件的内容-添加表单 -->
        <el-container class="detail">
          <el-row>
            <el-col :span="2" :offset="2"> 标题：</el-col>
            <el-col :span="18">
             {{ arc.title }}
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2" :offset="2">子标题：</el-col>
            <el-col :span="18">
             {{ arc.sub_title }}
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2" :offset="2">分类：</el-col>
            <el-col :span="18">
              {{ arc.cate_name }}
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2" :offset="2"> 内容：</el-col>
            <el-col :span="18">
             {{ arc.content }}
            </el-col>
          </el-row>
         
          <el-row>
            <el-col :span="2" :offset="2"> 浏览：</el-col>
            <el-col :span="18">
             {{ arc.view }}
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2" :offset="2"> 点赞：</el-col>
            <el-col :span="18">
             {{ arc.like }}
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2" :offset="2"> 推荐首页：</el-col>
            <el-col :span="18">
             {{ arc.recommend==1 ? '推荐':'不推荐' }}
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="2" :offset="2">
              <el-button type="primary" style="margin-left:60px" @click="backList">返回</el-button>
            </el-col>
          </el-row>
          
        </el-container>
    </el-card>
  </div>
</template>

<script>
  import http from '../utils/http';
  export default {
    data(){
      return {
        arc:{
          title:"",
          sub_title:"",
          cate_id:1,//指写某个值，让默认选中
          content:"",
          view:0,
          like:0,
          recommend:false  //如果只有一个复选框，true/false 来控制选中或未选中
        },
        arc_id:0, //文章，分类id
        cate_id:0
      }
    },
    methods:{
      backList(){
        this.$router.go(-1) //返回到上一页：-1后退，0刷新，1前进
      },
      async getArticleInfo(){
        // 取参数
        const params = this.$route.params;
        console.log("获取文章信息",this.$route.params) // {arc_id: '61', cate_id: '1'}

        this.arc_id = params.arc_id;
        this.cate_id = params.cate_id;

        // 发请求
        // 接口地址：http://127.0.0.1:3000/article/article_edit/34，参数是在url
        let url = `/api/article/article_edit/${params.arc_id}`

        const res = await http.get(url)
        console.log(res)

        // 拿到结果
        const ret = res.data;
        console.log('接口给的',ret)
        const arc = ret.data; //文章对象(信息)

        // 把数据显示在对应的表单项上(回显数据)
        // this.arc.title = '我是悟空'

        // 表单对应的字段
        // title:"",
        // sub_title:"",
        // cate_id:1,//指写某个值，让默认选中
        // content:"",
        // view:0,
        // like:0,
        // recommend:false  //如果只有一个复选框，true/false 来控制选中或未选中

        // 接口返回的字段
        console.log('接口糽的文章信息',arc)

        this.arc.title = arc.title;
        this.arc.sub_title = arc.sub_title;
        this.arc.cate_id = arc.cate_id;//指写某个值，让默认选中
        this.arc.content = arc.content;
        this.arc.view= arc.view;
        this.arc.like= arc.like;
        // 后端返回的是0，1 。页面上true/false 来控制选中或未选中,所以需要单独处理
        // this.arc.recommend = arc.recommend;
        this.arc.recommend = arc.recommend==0 ? false : true;

      }
    },
    created(){
      this.getArticleInfo()
    }
  }
</script>

<style lang="less" scoped>
.article_add{
  // margin:15px;
  
  // /deep/ 深度选择器，可以重置组件内置的样式。别忘了样式要加scoped，
  // 有可能还需要!important来提升样式的优先级。
  /deep/.el-header {
    display: flex;
    align-items: center;
    height: 62px !important;
    background: #edebeb;

    .el-icon-s-home {
      color: #000000;
      font-size: 20px;
    }

    .el-breadcrumb {
      height: 35px;
      display: flex;
      align-items: center;
      margin-bottom: 0;
      font-size: 12px;
    }
  }

  .box-card{
    margin: 10px;

    height: 600px;
    overflow-y: scroll;

    .detail{
      display: flex;
      flex-direction: column;

      .el-row{
        line-height: 36px;

        .el-col{
          &:first-child{
            text-align: right;
          }
        }
      }
    }
  }
}
</style>